<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    <meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<!--    &lt;!&ndash; 适配移动设备   &ndash;&gt;-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
<!--    <title>主页</title>-->
<!--    &lt;!&ndash; jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) &ndash;&gt;-->
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
<!--    &lt;!&ndash; 最新版本的 Bootstrap 核心 CSS 文件 &ndash;&gt;-->
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<!--    &lt;!&ndash; 最新的 Bootstrap 核心 JavaScript 文件 &ndash;&gt;-->
<!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="ajax.js"></script>
</head>
<body>
<div class="banner">
    <a>登录</a>
    <a>个人</a>
    <a>日志</a>
</div>
<button id="sb">提交</button>
<div>
    <div class="person_img">
        <div style="margin-left: 0px;"><span title="上一张"><</span></div>
        <div style="margin-right: 0px;"><span title="下一张">></span></div>
    </div>
</div>
<div class="title">
    <span>☆爬虫资源区☆</span>
</div>
<div class="spider_source" id="spider_source">
    <ul>
<!--        <li v-for="i in my_source">-->
<!--            <h3>{{i.title}}</h3>-->
<!--            <p>简介:{{i.info}}</p>-->
<!--            <p>链接:{{i.link}}</p>-->
<!--        </li>-->
    </ul>
</div>
<div class="title">
    <span>☆留言区☆</span>
</div>
<div class="msg_content" id="msg_content">
    <ul>
<!--        <li v-for="i in user_info">-->
<!--            <h3>{{i.name}}</h3>-->
<!--            <p>时间:{{i.age}}</p>-->
<!--            <p>内容:{{i.sex}}</p>-->
<!--        </li>-->
    </ul>
    <form class="msg_form">
        <input>
        <button type="submit">提交</button>
    </form>

</div>
</body>
<script>
    $('.person_img').hover(function () {
        $(this).children().fadeTo('slow', 0.3)
    }, function () {
        $(this).children().fadeTo('slow', 0.03)
    });


    $('#sb').click(function () {
        ajax('./PHP/Data_test.php',{},function (xml) {
            let data = xml.responseText;

            let json_data = JSON.parse(data);

            // console.log(json_data);

            new Vue({
                el:'#msg_content',
                data:{
                    user_info:json_data.data
                }
            })

        },function () {
            alert('fail')
        },'GET',3000)
    });


    // new Vue({
    //     el:'#spider_source',
    //     data:{
    //         my_source:[
    //             {title:'Scrapy爬虫', info:'非常好用', link:'114'},
    //             {title:'Requests爬虫', info:'异常好用', link:'514'},
    //             {title:'Selenium爬虫', info:'很好用', link:'1919'}
    //         ]
    //     }
    // })
    //
    // new Vue({
    //     el:'#msg_content',
    //     data:{
    //         msg_content:[
    //             {speaker:'UDK', time:'114', content:'我忘记了啊'},
    //             {speaker:'RU', time:'514', content:'今天也是好天气'},
    //             {speaker:'HNS', time:'1919', content:'MRS!!!'},
    //         ]
    //     }
    // })

</script>
</html>